import React, { useState } from 'react';
import MyTitle from '../../../component/System settings/MyTitle'
import MySearch from '../../../component/System settings/MySearch'
import MyTabble from '../../../component/System settings/MyTabble'
import { Space, Button, Modal, Switch, Form, Input, Checkbox } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';

interface Props {

}

interface DataType {
    key: string;
    user: string;
    role: string;
    phone: number;
    name: string;
    switch: boolean;
}

function Role(props: Props) {
    const [componentDisabled, setComponentDisabled] = useState<boolean>(false);
    const [form] = Form.useForm();
    let [record, setRecord] = useState({})
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 保存rowkey的值
    let [rowkey, setRowkey] = useState([])
    let navigate = useNavigate()
    // 定义新增方法
    let handleAdd = () => {
        console.log('新增了')
        navigate('/index/systemsettings/addadmin')

    }

    // 定义有几列
    // 定义每行数据
    const data = [
        {
            "id": 1,
            "key": 1,
            "rolename": "超级管理",
            "count": 3,
            "roletext": "有最高权限的角色，不可删除",
            "time": "2022/11/4 21:28"
        },
        {
            "id": 2,
            "key": 2,
            "rolename": "超级管理",
            "count": 3,
            "roletext": "有最高权限的角色，不可删除",
            "time": "2022/11/4 21:9"
        },
        {
            "id": 3,
            "key": 3,
            "rolename": "超级管理",
            "count": 3,
            "roletext": "有最高权限的角色，不可删除",
            "time": "2020/09/08 10: 06"
        },
        {
            "id": 4,
            "key": 4,
            "rolename": "超级管理",
            "count": 3,
            "roletext": "有最高权限的角色，不可删除",
            "time": "2020/09/08 10: 06"
        },
        {
            "id": 5,
            "key": 5,
            "rolename": "超级管理",
            "count": 3,
            "roletext": "有最高权限的角色，不可删除",
            "time": "2022/11/4 15:41",
        },
        {
            "id": 6,
            "key": 6,
            "rolename": "超级管理",
            "count": 3,
            "roletext": "有最高权限的角色，不可删除",
            "time": "2022/11/4 15:59",
        }
    ]
    // 定义有几列
    const columns: ColumnsType<DataType> = [
        {
            title: '角色名称',
            dataIndex: 'rolename',
            key: 'rolename',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '角色下的管理人员',
            dataIndex: 'count',
            key: 'count',
        },
        {
            title: '角色描述',
            dataIndex: 'roletext',
            key: 'roletext',
        },
        {
            title: '是否启用',
            key: 'switch',
            dataIndex: 'switch',
            render: () => (
                <>
                    <Switch defaultChecked />
                </>
            ),
        },
        {
            title: '添加时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => showModal(record)}><FormOutlined /></a>
                    <a onClick={() => handle_oneDelete(record)}><DeleteOutlined /></a>
                </Space>
            ),
        },
    ];
    // 定义删除
    let handle_oneDelete = (record: any) => {
        console.log("删除了")
    }

    // 定义弹出框
    const showModal = (record: any) => {
        console.log('showModal出发了')
        setIsModalOpen(true);
        // 保存record值
        setRecord(record)
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };

    // 拿到选择框数据
    let selectrowKey = (rowkey: any) => {
        console.log('父组件拿到子组件的key了', rowkey)
        // 保存已选数据
        setRowkey(rowkey)
    }

    // 搜索
    let handleSearch = () => {
        console.log("搜索了")
    }

    const [check1, setcheck1] = useState<boolean>(false);
    const [check2, setcheck2] = useState<boolean>(false);
    const [check3, setcheck3] = useState<boolean>(false);
    // 保存
    const onFinish = (values: any) => {
        console.log(values)
        setcheck1(checked1)
        setcheck2(checked2)
        setcheck3(checked3)
    };

    const [checked1, setchecked1] = useState<boolean>(false);
    const [checked2, setchecked2] = useState<boolean>(false);
    const [checked3, setchecked3] = useState<boolean>(false);

    const onChange1 = (e: CheckboxChangeEvent) => {
        console.log(`checked1 = ${e.target.checked}`);
        setchecked1(e.target.checked)

    };
    const onChange2 = (e: CheckboxChangeEvent) => {
        console.log(`checked2 = ${e.target.checked}`);
        setchecked2(e.target.checked)
    };
    const onChange3 = (e: CheckboxChangeEvent) => {
        console.log(`checked3 = ${e.target.checked}`);
        setchecked3(e.target.checked)
    };




    return (
        <div>
            <MyTitle title={'角色管理'}>
                {/*给子组件传入这两个按钮 */}
                {
                    check1 == true ? <Button >导入</Button> : ''
                }
                {
                    check2 == true ? <Button style={{ marginRight: 10, backgroundColor: "rgb(215, 235, 243)", color: "blue" }}>导出</Button> : ''
                }
                {
                    check3 == true ? <Button style={{ marginRight: 10, backgroundColor: "rgb(215, 235, 243)", color: "blue" }}>删除</Button> : ''
                }


                <Button type="primary" onClick={handleAdd}>新增角色</Button>
            </MyTitle>

            {/* <MySearch /> */}
            <MyTabble columns={columns} selectrowKey={selectrowKey} managerList={data}>
                {/*给子组件传入自定义搜索组件 */}
                <MySearch handleSearch={handleSearch} />
                <Modal footer={null} onCancel={handleCancel} open={isModalOpen} onOk={handleOk}>
                    <Form
                        name="basic"
                        form={form}
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 16 }}
                        onFinish={onFinish}
                        style={{ backgroundColor: "white", width: 400, borderRadius: 50, paddingTop: 30, paddingRight: 0 }}
                    >
                        <Form.Item
                            label="角色名称"
                            name="name"
                        >
                            <Input placeholder="超级管理员" disabled />
                        </Form.Item>

                        <Form.Item
                            label="角色描述"
                            name="user"

                        >
                            <Input />
                        </Form.Item>

                        <Form.Item label="角色权限设置" name="disabled" valuePropName="checked">
                            <Checkbox onChange={onChange1}>导入</Checkbox>
                            <Checkbox onChange={onChange2}>导出</Checkbox>
                            <Checkbox onChange={onChange3}>批量删除</Checkbox>
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 10, span: 10 }}>
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                            <Button htmlType="button" style={{ marginLeft: 10 }}  >
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </MyTabble>
        </div>
    );
}

export default Role;